<template>
	<view class="config_coupon">
		<view class="detail_tap">
			<view class="detail_tap_outer" @tap="switchTap('1')">
				<view :class="{ selected: selectTap === '1' }">可领取</view>
			</view>
			<view class="detail_tap_outer" @tap="switchTap('2')">
				<view :class="{ selected: selectTap === '2' }">已领取</view>
			</view>
			<view class="detail_tap_outer" @tap="switchTap('3')">
				<view :class="{ selected: selectTap === '3' }">已使用</view>
			</view>
			<view class="detail_tap_outer" @tap="switchTap('4')">
				<view :class="{ selected: selectTap === '4' }">已过期</view>
			</view>
		</view>
		<view v-if="couponList.length === 0" class="shopping-cart-empty-component-container">
			<view>
				<image mode="widthFix" class="icon_shopping_cart" src="../../static/img/apollo/search_empty.png" />
				<view class="none_data">暂无数据</view>
			</view>

		</view>
		<CouponDetail @couponAction="(data) => getCoupon(data)" :couponConfig="item.couponConfig" :key="index"
			:selectTap="selectTap" v-for="(item, index) in couponList"></CouponDetail>
	</view>
</template>

<script>
import Big from 'big.js';
import {
	common
} from '../../services/index.js';
import CouponDetail from '../components/couponDetail/index.vue';
import {
	mapState,
} from "vuex";
export default {
	data() {
		return {
			selectTap: '1',
			coupon: [
				{ type: 1 }, { type: 2 }, { type: 3 }, { type: 4 }
			],
			couponList: [],
			able: [],
			disable: [],
			used: [],
		}
	},
	onLoad() {
	},
	components: {
		CouponDetail,
	},
	methods: {
		async couponConfig() {
			uni.showLoading();
			let res = {};
			if (this.selectTap === '1') {
				res = await common.couponConfig({
					source: 1
				});
				if (res.code === 200) {
					res.data.forEach((e) => {
						if (e.couponConfig.couponLimit !== null) {
							e.couponConfig.couponLimit = new Big(e.couponConfig.couponLimit).div(100);
							if (e.couponConfig.type === 1) {
								e.couponConfig.couponAmount = new Big(e.couponConfig.couponAmount).div(100);
							}
						}
						if (e.couponConfig.type === 2) {
							e.couponConfig.discount = new Big(e.couponConfig.discount).times(10);
						}
					})
					this.couponList = res.data.filter((e) => e.couponStatus === 1);
				}
			} else if (this.selectTap === '2') {
				res = await common.couponReceived({
					isVirtual: false
				});
				if (res.code === 200) {
					res.data.forEach((e) => {
						if (e.couponConfig.couponLimit !== null) {
							e.couponConfig.couponLimit = new Big(e.couponConfig.couponLimit).div(100);
							if (e.couponConfig.type === 1) {
								e.couponConfig.couponAmount = new Big(e.couponConfig.couponAmount).div(100);
							}
						}
					})
					this.couponList = res.data.filter((e) => e.couponStatus === 2);
				}
			} else if (this.selectTap === '3') {
				res = await common.couponConfig({
					source: 1
				});
				if (res.code === 200) {
					res.data.forEach((e) => {
						if (e.couponConfig.couponLimit !== null) {
							e.couponConfig.couponLimit = new Big(e.couponConfig.couponLimit).div(100);
							if (e.couponConfig.type === 1) {
								e.couponConfig.couponAmount = new Big(e.couponConfig.couponAmount).div(100);
							}
						}
					})
					this.couponList = res.data.filter((e) => e.couponStatus === 4);
				}
			} else if (this.selectTap === '4') {
				res = await common.couponConfig({
					source: 1
				});
				if (res.code === 200) {
					res.data.forEach((e) => {
						if (e.couponConfig.couponLimit !== null) {
							e.couponConfig.couponLimit = new Big(e.couponConfig.couponLimit).div(100);
							if (e.couponConfig.type === 1) {
								e.couponConfig.couponAmount = new Big(e.couponConfig.couponAmount).div(100);
							}
						}
					})
					this.couponList = res.data.filter((e) => e.couponStatus === 3);
				}
			}
			uni.hideLoading();
		},
		switchTap(tap) {
			this.selectTap = tap;
			this.couponConfig();
		},
		async getCoupon(data) {
			uni.showLoading();
			let res = await common.couponReceiveAction({ couponId: data.id });
			if (res.code === 200) {
				uni.showToast({
					title: '领取成功',
					icon: 'none'
				});
				this.couponConfig();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
			uni.hideLoading();
			console.log(data);
		}
	},
	computed: {
		...mapState(["userInfo", "userToken"]),
	},
	mounted() {
		this.couponConfig();
	}
}
</script>

<style scoped>
.config_coupon {
	padding: 20rpx 0;
}

.detail_tap {
	display: flex;
	padding: 0 70rpx;
	justify-content: space-around;
	padding-bottom: 10rpx;
	text-align: center;
}

.detail_tap_outer {
	width: 100rpx;
}

.detail_tap_outer view {
	width: 100rpx;
	margin: 0 auto;
	padding-bottom: 10rpx;
}

.detail_tap .selected {
	color: #f25500;
	border-bottom: 4rpx solid #f25500;
}

.shopping-cart-empty-component-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #fff;
	width: 100%;
	height: 560rpx;
}

.shopping-cart-empty-component-container .icon_shopping_cart {
	margin: 160rpx 0 0;
	width: 233rpx;
	height: 194rpx;
}

.shopping-cart-empty-component-container .tips_empty {
	width: 100%;
	height: 28rpx;
	text-align: center;
	font-size: 28rpx;
	line-height: 28rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin: 10rpx 0 0;
}

.none_data {
	text-align: center;
	margin-top: 15rpx;
	color: #aaa;
}
</style>
